{% set publicise_page="buttons" %}
{% extends "publisher/publicise/_publisher_publicise_layout.html" %}

{% block publicise_content %}
  <div class="row">
    <h4>Promote your snap using Snap Store badges</h4>
  </div>
  <div class="row">
    <div class="col-2">
      <label>Language:</label>
    </div>
    <div class="col-7">
      <form class="p-form--inline js-language-select">
        <select name="language">
          {% for lang, data in available.items() %}
            <option value="{{ lang }}" {% if lang == 'en' %}selected{% endif%}>
              {{data.title}}
            </option>
          {% endfor %}
        </select>
      </form>
      <p>You can help translate these buttons <a href="https://github.com/snapcore/snap-store-badges" target="_blank" class="p-link--external">in this repository</a>.</p>
    </div>
  </div>

  <div class="row">
    <hr />
  </div>

  {% for lang, data in available.items() %}
    <div id="{{ lang }}_content" class="js-language-content{% if loop.index != 1 %} u-hide{% endif %}">
      <div class="row">
        <div class="col-2">
        </div>
        <div class="col-7">
          <div class="row">
            <div class="col-5">
              <p class="snapcraft-publicise__images">
                {% set url = "images/badges/" + lang + "/snap-store-black.svg" %}
                <a href="https://snapcraft.io/{{ snap_name }}">
                  <img alt="{{ data.text }}" src="{{ static_url(url) }}" />
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-2">
          <label>HTML:</label>
        </div>
        <div class="col-7">
          <div class="p-code-copyable not-cli">
            <code class="p-code-copyable__input" id="snippet-{{ lang }}-black-html">&lt;a href="https://snapcraft.io/{{ snap_name }}"&gt;
  &lt;img alt="{{ data.text }}" src="https://snapcraft.io/static/images/badges/{{ lang }}/snap-store-black.svg" /&gt;
&lt;/a&gt;</code>
            <button class="p-code-copyable__action js-clipboard-copy" data-clipboard-target="#snippet-{{ lang }}-black-html">Copy to clipboard</button>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-2">
          <label>Markdown:</label>
        </div>
        <div class="col-7">
          <div class="p-code-copyable not-cli">
            <code class="p-code-copyable__input" id="snippet-{{ lang }}-black-md">[![{{ data.text }}](https://snapcraft.io/static/images/badges/{{ lang }}/snap-store-black.svg)](https://snapcraft.io/{{ snap_name }})</code>
            <button class="p-code-copyable__action js-clipboard-copy" data-clipboard-target="#snippet-{{ lang }}-black-md">Copy to clipboard</button>
          </div>
        </div>
      </div>

      <div class="row">
        <hr />
      </div>

      <div class="row">
        <div class="col-2">
        </div>
        <div class="col-7">
          <div class="row">
            <div class="col-5">
              <p class="snapcraft-publicise__images">
                {% set url = "images/badges/" + lang + "/snap-store-white.svg" %}
                <a href="https://snapcraft.io/{{ snap_name }}">
                  <img alt="{{ data.text }}" src="{{ static_url(url) }}" />
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-2">
          <label>HTML:</label>
        </div>
        <div class="col-7">
          <div class="p-code-copyable not-cli">
            <code class="p-code-copyable__input" id="snippet-{{ lang }}-white-html">&lt;a href="https://snapcraft.io/{{ snap_name }}"&gt;
  &lt;img alt="{{ data.text }}" src="https://snapcraft.io/static/images/badges/{{ lang }}/snap-store-white.svg" /&gt;
&lt;/a&gt;</code>
            <button class="p-code-copyable__action js-clipboard-copy" data-clipboard-target="#snippet-{{ lang }}-white-html">Copy to clipboard</button>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-2">
          <label>Markdown:</label>
        </div>
        <div class="col-7">
          <div class="p-code-copyable not-cli">
            <code class="p-code-copyable__input" id="snippet-{{ lang }}-white-md">[![{{ data.text }}](https://snapcraft.io/static/images/badges/{{ lang }}/snap-store-white.svg)](https://snapcraft.io/{{ snap_name }})</code>
            <button class="p-code-copyable__action js-clipboard-copy" data-clipboard-target="#snippet-{{ lang }}-white-md">Copy to clipboard</button>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}

  <div class="row">
    <hr />
  </div>

  <div class="row">
    <div class="col-2">
      Download all:
    </div>
    <div class="col-7">
      <a href="https://github.com/snapcore/snap-store-badges/archive/{{ download_version }}.zip" class="p-button">zip</a>
      <a href="https://github.com/snapcore/snap-store-badges/archive/{{ download_version }}.tar.gz" class="p-button">tar.gz</a>
      <a href="https://raw.githubusercontent.com/snapcore/snap-store-badges/master/LICENSE.md" target="_blank" class="p-link--external">View image licence</a>
    </div>
  </div>
{% endblock %}

{% block scripts_modules %}
<script src="{{ static_url('js/modules/clipboard.min.js') }}" defer></script>
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        snapcraft.publisher.publicise.initSnapButtonsPicker();

        if (typeof ClipboardJS !== 'undefined') {
          new ClipboardJS('.js-clipboard-copy');
        }
      });
    });
  </script>
{% endblock %}
